Computer Science 161.01

October 18^th 2019

JavaScript Conditional Statements

Use the Scratchpad throughout

The if Statement in JavaScript

At this point, all we can do in JavaScript is write a sequence of statements (mostly assignment statements interspersed with calls to alert()). But, of course, we’d like to allow our program to decide what to do based on certain conditions that occur, just as we did with the VSC-32 jump instruction.

We do this in JavaScript with the if statement.

The syntax for the if statement is given below.

As usual with syntax, pay strict attention to the grammar rules!

//JAVASCRIPT if STATEMENT SYNTAX

// if ( Boolean expression ) {

// statement(s)

// }

The rules insist on the (lower-case) word if .

This must be followed by a parenthetical expression which should be Boolean.

Thus if (x > 2) would be legitimate.

This should be followed by an opening left brace, a sequence of legal JavaScript statements of any type, a closing right brace.

So, this would constitute a legitimate if statement:

if ( x > 2 ) {

alert("x is a really big number");

x = x - 2;

}

Notice there are two statements within the statement group that are executed only if x > 2.

As for the semantics, let’s imagine having a little more of an example, and predict what will happen.

Predict what will happen, then paste this into the scratchpad to see if you were right!

x = 3;

if ( x > 2 ) {

alert("x is a really big number");

x = x - 2;

}

alert("good-bye" + x);

The output should be:

x is a really big number

followed by:

good-bye 1

Notice that the two statements in the if group are executed because x > 2.

But what if the first assignment statement x = 3 is replaced by x = 2 ?

What will the output be then?

Predict it, and if necessary use the scratchpad to make yourself feel good.

But what if the first assignment statement is x = 7 instead?

Predict what happens and then try it!

Prompting for input

You’ve seen that it’s a pain to change the initial assignment each time.
It’ s more fun to prompt for a value instead.

We could write

x = prompt("Hey you! Enter some number: ");

This will cause the value that is entered interactively in response to the prompt to be assigned to x.

(Unfortunately whatever is entered in response to a prompt is regarded as a string by JavaScript and that can cause havoc. For example, if you entered 3 in response, x would be regarded as "3" ,which is a different kind of creature. If you then did y = x + 2 you might get "32" for y , which might not please you!)

Exercise: Try messing in the scratchpad with the following examples:

//PLAY WITH THIS SOME… FIRST ENTER 110, NEXT TIME ENTER 50

F = prompt("Enter degrees F: "); //READ F

C = 5/9 * (F-32); //compute expression then STORE C

alert(C + " degrees C"); //WRITE C

if (C > 40)

alert("TOO HOT!");

alert("I am done now.");

//NOW WRITE YOUR OWN if STATEMENT THAT COMPLAINS WHEN IT’S TOO COLD

//PLAY WITH THIS SOME… FIRST ENTER 110, NEXT TIME ENTER 50

F = prompt("Enter degrees F: "); //READ F

C = 5/9 * (F-32); //compute expression then STORE C

alert(C + " degrees C"); //WRITE C

if (C > 40) {

alert("TOO HOT!");

document.bgColor = "red";

}

alert("I am done now.");

document.bgColor //shows the color in hex!

//NOW WRITE YOUR OWN if STATEMENT THAT COMPLAINS WHEN IT’S TOO COLD

//AND, WHEN IT IS TOO COLD, CHANGES THE BACKGROUND COLOR TO BLUE

//TRY AN EXAMPLE WHEREBY SOMEONE TYPES A COLOR

//PROMPT FOR A COLOR, then assign that color as the background color

//Put a special alert box up if that color is black!

myColor = prompt("Enter a color: "); //do the rest!!

//INTRODUCING the if…else statement

//Try this, first with x having the bigger number (see below),

//then with x having the smaller number.

x = 20;

y = 10;

if (x > y)

alert("x is bigger");

else

alert("y is bigger");

alert("The average of x and y is " + (x+y)/2);

//INTRODUCING the if…else statement

//Try this, first with x having the bigger number (see below),

//then with x having the smaller number.

Exercise: YOU ARE ON YOUR OWN.

Write a JavaScript segment that will prompt for one number then report with

an alert box that the number is odd, or that it is even. (There’s one operator that will tell us pretty readily whether the number is odd or even. Think about it!)